<template>
    <div id="my-Balance">
      <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
        <div class="box2">
          <div style="height:1rem" >
            <flexbox :gutter="0" class="vux-1px-b">
              <flexbox-item><div class="titleBox">状态和时间</div></flexbox-item>
              <flexbox-item><div class="titleBox">金额</div></flexbox-item>
            </flexbox>
          </div>
          <load-more style="margin-top:2rem" v-if="nodatashow" :show-loading="false" :tip="'暂无记录'"></load-more>
          <div class="product-earnings vux-1px-b" v-for="(item, index) in earningslist" :key="index">
            <flexbox class="flex-product" :class="'recordListBox'">
              <flexbox-item class="timeBox">
                <span class="typeNameBox">{{item.tranTypeName}}</span>
                <span>{{item.createTime}}</span>
              </flexbox-item>
              <flexbox-item class="monyeBox">
                {{item.tranAmt}}<span>元</span>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
        <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="status.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
          <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
        </div>
      </scroller>
    </div>
</template>
<script>
var timeStamp = String(parseInt(Number(new Date()) / 1000))
import { Flexbox, FlexboxItem, TransferDom, Popup, Group, Cell, LoadMore, Scroller, Spinner } from 'vux'
import api from '../../api'
import utils from '../../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      earningslist: [],
      tokenval: '',
      nodatashow: false,
      PageNum: 100,
      count: 1, // 记录页数
      downnum: 0,
      partnerid: '',
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Popup,
    Group,
    Cell,
    LoadMore,
    Scroller,
    Spinner
  },
  created () {
    window.document.title = '可提现余额'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    apiEarnings (PageNum, downnum, partnerid) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: PageNum,
        partnerId: partnerid,
        searchDate: downnum
      }
      var params_1 = {
          token: this.tokenval,
          userId: this.$store.state.userID,
          timestamp: timeStamp,
          page: 1,
          perPage: PageNum
        }
      api.balance(params_1).then(res => {
        if (res.status === 200 || res.status === "200") {
          if (res.data) {
            if (res.data.list) {
              this.nodatashow = false
              this.earningslist = res.data.list
            } else {
              this.nodatashow = true
            }
          } else {
            this.nodatashow = true
          }
        }
      })
    },
    loadMore () {
      this.count ++
      this.PageNum = this.count * 10 + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import '~vux/src/styles/1px.less';
#my-Balance{
  background:white;
}
</style>
